<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
		<title>首页 - 光年(学员列表)OA管理系统</title>
		<link rel="icon" href="favicon.ico" type="image/ico">
		<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
		<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
		<meta name="author" content="yinqi">
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link href="css/materialdesignicons.min.css" rel="stylesheet">
		<link href="css/style.min.css" rel="stylesheet">
		<script src="js/axios.min.js"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div class="lyear-layout-web">
			<div class="lyear-layout-container">
				<!--左侧导航-->
				<aside class="lyear-layout-sidebar">

					<!-- logo -->
					<div id="logo" class="sidebar-header">
						<a href="index.html"><img src="images/logo-sidebar.png" title="LightYear" alt="LightYear" /></a>
					</div>
					<div class="lyear-layout-sidebar-scroll">

						<nav class="sidebar-main">
							<ul class="nav nav-drawer">
								<li class="nav-item active"> <a href="index.html"><i class="mdi mdi-home"></i> 办公首页</a> </li>
								<li class="nav-item nav-item-has-subnav">
									<a href="javascript:void(0)"><i class="mdi mdi-image-filter-vintage"></i> 权限管理</a>
									<ul class="nav nav-subnav">
										<li> <a href="role_list.html">用户角色</a> </li>
										<li> <a href="role_add.html">添加角色</a> </li>
									</ul>
								</li>
								<li class="nav-item nav-item-has-subnav">
									<a href="#"><i class="mdi mdi-account-convert"></i> 考勤管理</a>
									<ul class="nav nav-subnav">
										<li> <a href="work_add.html">请假加班</a> </li>
										<li> <a href="work_list.html">我的记录</a> </li>
									</ul>
								</li>
								<li class="nav-item nav-item-has-subnav">
									<a href="javascript:void(0)"><i class="mdi mdi-counter"></i> 部门管理</a>
									<ul class="nav nav-subnav">
										<li> <a href="dept_list.html">部门列表</a> </li>
										<li> <a href="dept_add.html">新增部门</a> </li>
									</ul>
								</li>
								<li class="nav-item nav-item-has-subnav">
									<a href="javascript:void(0)"><i class="mdi mdi-account-settings"></i> 员工管理</a>
									<ul class="nav nav-subnav">
										<li> <a href="employee_list.html">员工列表</a> </li>
										<li> <a href="employee_add.html">员工新增</a> </li>
										<li> <a href="employee_import.html">员工导入</a> </li>
									</ul>
								</li>
								<li class="nav-item nav-item-has-subnav">
									<a href="javascript:void(0)"><i class="mdi mdi-shovel"></i> 学科管理</a>
									<ul class="nav nav-subnav">
										<li> <a href="subject_list.html">学科列表</a> </li>
										<li> <a href="subject_add.html">学科新增</a> </li>
									</ul>
								</li>
								<li class="nav-item nav-item-has-subnav">
									<a href="javascript:void(0)"><i class="mdi mdi-face-profile"></i> 班级管理</a>
									<ul class="nav nav-subnav">
										<li> <a href="class_list.html">班级列表</a> </li>
										<li> <a href="class_add.html">班级新增</a> </li>
									</ul>
								</li>
								<li class="nav-item nav-item-has-subnav">
									<a href="javascript:void(0)"><i class="mdi mdi-trophy-variant"></i> 学员管理</a>
									<ul class="nav nav-subnav">
										<li> <a href="student_list.html">学员列表</a> </li>
										<li> <a href="student_add.html">学员新增</a> </li>
										<li> <a href="student_import.html">学员导入</a> </li>
									</ul>
								</li>

							</ul>
						</nav>
					</div>

				</aside>
				<!--End 左侧导航-->

				<!--头部信息-->
				<header class="lyear-layout-header">

					<nav class="navbar navbar-default">
						<div class="topbar">

							<div class="topbar-left">
								<div class="lyear-aside-toggler">
									<span class="lyear-toggler-bar"></span>
									<span class="lyear-toggler-bar"></span>
									<span class="lyear-toggler-bar"></span>
								</div>
								<span class="navbar-page-title"> 后台首页 </span>
							</div>

							<ul class="topbar-right">
								<li class="dropdown dropdown-profile">
									<a href="javascript:void(0)" data-toggle="dropdown">
										<img class="img-avatar img-avatar-48 m-r-10" src="images/users/avatar.jpg" alt="笔下光年" />
										<span>笔下光年 <span class="caret"></span></span>
									</a>
									<ul class="dropdown-menu dropdown-menu-right">
										<li> <a href="lyear_pages_profile.html"><i class="mdi mdi-account"></i> 个人信息</a> </li>
										<li> <a href="lyear_pages_edit_pwd.html"><i class="mdi mdi-lock-outline"></i> 修改密码</a> </li>
										<li> <a href="javascript:void(0)"><i class="mdi mdi-delete"></i> 清空缓存</a></li>
										<li class="divider"></li>
										<li> <a href="login.html"><i class="mdi mdi-logout-variant"></i> 退出登录</a> </li>
									</ul>
								</li>
								<!--切换主题配色-->
								<li class="dropdown dropdown-skin">
									<span data-toggle="dropdown" class="icon-palette"><i class="mdi mdi-palette"></i></span>
									<ul class="dropdown-menu dropdown-menu-right" data-stopPropagation="true">
										<li class="drop-title">
											<p>主题</p>
										</li>
										<li class="drop-skin-li clearfix">
											<span class="inverse">
												<input type="radio" name="site_theme" value="default" id="site_theme_1" checked>
												<label for="site_theme_1"></label>
											</span>
											<span>
												<input type="radio" name="site_theme" value="dark" id="site_theme_2">
												<label for="site_theme_2"></label>
											</span>
											<span>
												<input type="radio" name="site_theme" value="translucent" id="site_theme_3">
												<label for="site_theme_3"></label>
											</span>
										</li>
										<li class="drop-title">
											<p>LOGO</p>
										</li>
										<li class="drop-skin-li clearfix">
											<span class="inverse">
												<input type="radio" name="logo_bg" value="default" id="logo_bg_1" checked>
												<label for="logo_bg_1"></label>
											</span>
											<span>
												<input type="radio" name="logo_bg" value="color_2" id="logo_bg_2">
												<label for="logo_bg_2"></label>
											</span>
											<span>
												<input type="radio" name="logo_bg" value="color_3" id="logo_bg_3">
												<label for="logo_bg_3"></label>
											</span>
											<span>
												<input type="radio" name="logo_bg" value="color_4" id="logo_bg_4">
												<label for="logo_bg_4"></label>
											</span>
											<span>
												<input type="radio" name="logo_bg" value="color_5" id="logo_bg_5">
												<label for="logo_bg_5"></label>
											</span>
											<span>
												<input type="radio" name="logo_bg" value="color_6" id="logo_bg_6">
												<label for="logo_bg_6"></label>
											</span>
											<span>
												<input type="radio" name="logo_bg" value="color_7" id="logo_bg_7">
												<label for="logo_bg_7"></label>
											</span>
											<span>
												<input type="radio" name="logo_bg" value="color_8" id="logo_bg_8">
												<label for="logo_bg_8"></label>
											</span>
										</li>
										<li class="drop-title">
											<p>头部</p>
										</li>
										<li class="drop-skin-li clearfix">
											<span class="inverse">
												<input type="radio" name="header_bg" value="default" id="header_bg_1" checked>
												<label for="header_bg_1"></label>
											</span>
											<span>
												<input type="radio" name="header_bg" value="color_2" id="header_bg_2">
												<label for="header_bg_2"></label>
											</span>
											<span>
												<input type="radio" name="header_bg" value="color_3" id="header_bg_3">
												<label for="header_bg_3"></label>
											</span>
											<span>
												<input type="radio" name="header_bg" value="color_4" id="header_bg_4">
												<label for="header_bg_4"></label>
											</span>
											<span>
												<input type="radio" name="header_bg" value="color_5" id="header_bg_5">
												<label for="header_bg_5"></label>
											</span>
											<span>
												<input type="radio" name="header_bg" value="color_6" id="header_bg_6">
												<label for="header_bg_6"></label>
											</span>
											<span>
												<input type="radio" name="header_bg" value="color_7" id="header_bg_7">
												<label for="header_bg_7"></label>
											</span>
											<span>
												<input type="radio" name="header_bg" value="color_8" id="header_bg_8">
												<label for="header_bg_8"></label>
											</span>
										</li>
										<li class="drop-title">
											<p>侧边栏</p>
										</li>
										<li class="drop-skin-li clearfix">
											<span class="inverse">
												<input type="radio" name="sidebar_bg" value="default" id="sidebar_bg_1" checked>
												<label for="sidebar_bg_1"></label>
											</span>
											<span>
												<input type="radio" name="sidebar_bg" value="color_2" id="sidebar_bg_2">
												<label for="sidebar_bg_2"></label>
											</span>
											<span>
												<input type="radio" name="sidebar_bg" value="color_3" id="sidebar_bg_3">
												<label for="sidebar_bg_3"></label>
											</span>
											<span>
												<input type="radio" name="sidebar_bg" value="color_4" id="sidebar_bg_4">
												<label for="sidebar_bg_4"></label>
											</span>
											<span>
												<input type="radio" name="sidebar_bg" value="color_5" id="sidebar_bg_5">
												<label for="sidebar_bg_5"></label>
											</span>
											<span>
												<input type="radio" name="sidebar_bg" value="color_6" id="sidebar_bg_6">
												<label for="sidebar_bg_6"></label>
											</span>
											<span>
												<input type="radio" name="sidebar_bg" value="color_7" id="sidebar_bg_7">
												<label for="sidebar_bg_7"></label>
											</span>
											<span>
												<input type="radio" name="sidebar_bg" value="color_8" id="sidebar_bg_8">
												<label for="sidebar_bg_8"></label>
											</span>
										</li>
									</ul>
								</li>
								<!--切换主题配色-->
							</ul>

						</div>
					</nav>

				</header>
				<!--End 头部信息-->

				<!--页面主要内容-->
				<main class="lyear-layout-content">

					<div class="container-fluid" id="student">
						<!-- 内容区 -->
						<div class="row">
							<div class="col-lg-12">
								<div class="card">
									<div class="table-responsive">
										<table class="table">
											<thead>
												<tr>
													<th>学号</th>
													<th>学员名称</th>
													<th>所在班级</th>
													<th>性别</th>
													<th>手机号</th>
													<th>邮箱</th>
													<th>QQ</th>
													<th>毕业院校</th>
													<th>学历</th>
													<th>出生日期</th>
													<th>入学日期</th>
													<th colspan="2" class="text-center">操作</th>
												</tr>
											</thead>
											<tbody>
												<tr v-for="(student,index) in students" :key="index">
													<th>{{student.studentId}}</th>
													<td>{{student.studentName}}</td>
													<td>{{student.cls.className}}</td>
													<td>{{student.stuGender}}</td>
													<td>{{student.stuPhone}}</td>
													<td>{{student.stuEmail}}</td>
													<td>{{student.stuQq}}</td>
													<td>{{student.graduateSchool}}</td>
													<td>{{student.education.educationName}}</td>
													<td>{{student.createTime}}</td>
													<td>{{student.inTime}}</td>
													<td class="text-right">
														<a  @click="del(student.studentId)" class="btn btn-w-xs btn-round btn-info"
														 href="#">删除</a>
													</td>
													<td class="text-left">
														<a class="btn btn-w-xs btn-round btn-info" v-on:click="goUpdate(student.studentId)" >更新</a>
													</td>
												</tr>
											</tbody>
										</table>
									</div>
								</div>
							</div>

						</div>
						<!-- 内容区结束 -->
						<div class="row">
							<div class="col-lg-4 text-left">
								<a class="btn btn-info" href="student_add.html">添加学生</a>
							</div>
							<div class="col-lg-4 text-center">
								<nav>
									<ul class="pagination">
										<li v-on:click="getStudentPage(pageNo-1)">
											<a href="#" aria-label="Previous">
												<span aria-hidden="true">&laquo;</span>
											</a>
										</li>
										<li v-on:click="getStudentPage(p)" :class="{active:p==pageNo}" v-for="(p,index) in pagess"><a href="#">{{p}}</a></li>
										<li v-on:click="getStudentPage(pageNo+1)">
											<a href="#" aria-label="Next">
												<span aria-hidden="true">&raquo;</span>
											</a>
										</li>
									</ul>
								</nav>
							</div>
							<div class="col-lg-4 text-center">
								<a class="btn btn-info" href="#">导出Excel</a>
							</div>
						</div>
					</div>

				</main>
				<!--End 页面主要内容-->
			</div>
		</div>

		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>
		<script type="text/javascript" src="js/main.min.js"></script>

		<!--图表插件-->
		<script type="text/javascript" src="js/Chart.js"></script>
		<script type="text/javascript">
			//实例化Vue对象
			new Vue({
				el: "#student",
				data: {
					pageNo: 1,
					pageSize: 7,
					pages: 1,
					students: []
				},
				methods: {

					del: function(studentId) {
						if (confirm('是否删除')) {
							axios.get("http://localhost:8080/student/deleteStudent?" + "studentId=" + studentId, {
								params: {
									studentId: studentId
								}
							}).then(function(d) {
								location.reload();
							}).catch(function(error) {
								console.log("e=", error)
							});
						} else {

						}
					},

					goUpdate:function(studentId){
						location.href="student_update.html?"+"studentId="+studentId;
					},
					/* 分页查询 */
					getStudentPage: function(num) {
						var that = this;
						that.pageNo = num;

						if (that.pageNo <= 0) {
							alert("已经是第一页");
							that.pageNo = 1;
						}

						if (that.pageNo > that.pages) {
							alert("已经是最后一页");
							console.log("=====", that.pages);
							that.pageNo = that.pages;
						}

						axios.get("http://localhost:8080/student/getStudentPage", {
							params: {
								pageNo: that.pageNo,
								pageSize: that.pageSize
							}
						}).then(function(d) {
							console.log("d=", d.data.data.obj);
							that.students = d.data.data.obj;
							that.pages = d.data.data.pages;
						}).catch(function(error) {
							console.log("e=", error)
						});

					}
				},
				/* 钩子函数可以在整个页面或者是vue对象创建过程中执行 */
				created() {
					var that = this;
					console.log("我是钩子函数....我被执行了...");
					//在此钩子函数中获取第一页数据
					axios.get("http://localhost:8080/student/getStudentPage", {
						params: {
							pageNo: that.pageNo,
							pageSize: that.pageSize
						}
					}).then(function(d) {
						console.log("d=", d.data.data.obj);
						that.students = d.data.data.obj;
						that.pages = d.data.data.pages;
					}).catch(function(error) {
						console.log("e=", error)
					});
				},
				/* 计算属性 */
				computed: {
					pagess: function() {
						var list = [];
						//当前页
						var pn = this.pageNo;
						//总页数
						var pc = this.pages;

						if (pc <= 3) {
							for (var i = 1; i <= pc; i++) {
								list.push(i);
							}
						} else {
							if (pn <= 3) {
								for (var i = 1; i <= 3; i++) {
									list.push(i);
								}
							} else {
								for (var i = pn - 2; i <= pn; i++) {
									list.push(i);
								}
							}
						}
						return list;
					}
				}

			});
		</script>
	</body>
</html>
